<template>
<form
  ref="form"
  :action="$twApp.gateway + '/openapi-uc/oauth2.0/authorize'"
  method="post"
  class="tw-liblogintecent">
  <input type="hidden" id="client_id" name="client_id" v-model="client_Id">
  <input type="hidden" id="response_type" name="response_type" value="code">
  <input type="hidden" id="redirect_uri" name="redirect_uri" v-model="redirectUri">
  <input type="hidden" id="state" name="state" value="">
  <input type="hidden" id="version" name="version" value="1.0">

  <div class="tw-login-item-wrap">
    <div class="tw-login-input-wrapper">
      <div class="xicon">
        <img class="ximg" src="@assets/xuser.png" />
      </div>
      <input v-model="username" id="uname" name="uname" spellcheck="false" type="text" :placeholder="usernamePlaceholder" maxlength="30" class="tw-login-input tw-login-input-with-prefix">
    </div>
    <div class="mt40 tw-login-input-wrapper">
      <div class="xicon">
        <img class="ximg" src="@assets/xpwd.png" />
      </div>
      <input v-model="password" id="staticmm" name="staticmm" spellcheck="false" type="password" :placeholder="passwordPlaceholder" class="tw-login-input tw-login-input-with-prefix">
    </div>
    <div class="remind-text">
      <p class="err-msg">{{errMsg}}</p>
      <!-- <a class="forget-password" :href="findPwdUrl">忘记密码</a> -->
    </div>
    <a class="submit-btn" @click="login">
      <span>登录</span>
    </a>
  </div>
</form>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'tw-liblogin',

  props,

  mixins: [style],

  data() {
    return {
      username: '',
      password: '',
      errMsg: '',
      client_Id: '',
      redirectUri: ''
    }
  },

  computed: {
    style () {
      return {
        linkColor: this.linkColor,
        isConcise: this.isConcise,
        linkText: this.linkText,
        toHome: this.toHome,
        btnColor: this.btnColor
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root .tw-liblogin-text a,
        ::root .tw-liblogin-text .xcut {
          color: ${this.linkColor};
        }

        ::root .tw-libcaptcha-verify .verify-bar-area .verify-move-block:hover {
          background-color: ${this.movColor};
        }

        ::root .tw-liblogin-btn {
          background-color: ${this.btnColor};
        }
      `

      this.addStyle(style)
    },

    login () {
      if (this.username === '') {
        this.errMsg = '请输入用户名'
        return
      }

      if (this.password === '') {
        this.errMsg = '请输入密码'
        return
      }

      // this.$refs.form.submit()

      const CryptoJS = window.CryptoJS
      const key = CryptoJS.enc.Utf8.parse(window.$twApp.appKey)

      const password = CryptoJS.AES.encrypt(this.password, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString()

      window.axios({
        url: window.$twApp.gateway + '/openapi-uc/oauth/token?' + window.$ui.qs.stringify({
          client_id: window.$twApp.appId,
          client_secret: window.$twApp.appKey,
          grant_type: 'password',
          password,
          username: this.username
        }, { arrayFormat: 'indices' }),
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {}
      }).then(resp => {
        if (resp.data.access_token) {
          this.$refs.form.submit()
        } else {
          this.errMsg = '登录异常，请检查帐号或密码重试'
        }
      }).catch(e => {
        this.errMsg = '登录异常，请检查帐号或密码重试'
      })
    }
  },

  created () {
    this.client_Id = this.clientId || this.$ui.urlQuery.client_id
    this.redirectUri = this.loginSuccessUrl || this.$ui.urlQuery.redirect_uri
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
